<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1_放大与过度</title>
    <style>
        div{
            width:100px;
            height:100px;
            background-color: #f00;
            margin:100px auto 0;
            /*给变换增加过渡时间，否则瞬间变换太突兀
            注意：过度需要加在元素本身上，不能加在悬停上，否则不悬停时没有过度效果
            */

            transition: 2s;/*单位：秒*/
        }
        div:hover {
            background-color: #0aa1ed;
            border-radius: 50px;
            /*变换：
            scale（）元素放缩 n>1放大n倍 n=1大小不变 0<n<1缩小n倍 0缩小到看不见
            */
            /*不放大只旋转*/
            /*transform: scale(2);*/
            /*transition: 2s;*/
            /*transform:rotate(180deg);*/


            /*边放大边旋转*/
            /* rotate 单位deg 正数顺时针转 多个值空格隔开 */
            transform:scale(2) rotate(-180deg);
        }

    </style>
</head>
<body>
<div></div>
</body>
</html>